import React from "react";
import {toJS} from "mobx";
import FieldView from "./view";
import {findDOMNode} from "react-dom";
import {inject, observer} from "mobx-react";
import FBHeaderView from "../component/form-header/View";
import FBFooterView from "../component/form-footer/View";
import {rm_tabs} from "../../../../constants/form";

const { PROPS } = rm_tabs;

@inject('edcFormDesignerStore')
@observer
export default class FBMain extends React.Component {
  constructor(props) {
    super();

    const { componentStore } = props.edcFormDesignerStore;

    this.state = {
      paddingBottom: 60,
      minHeight: 0
    };
    this.store = componentStore;
    this.onClick = _.memoize(this.onClick.bind(this));
    this.handleMinHeight = _.debounce(this.calcHeight.bind(this), 300);
  }

  componentDidMount() {
    const footer = findDOMNode(this.footer);

    this.calcHeight();
    this.setState({ paddingBottom: footer.offsetHeight });

    window.addEventListener('resize', this.handleMinHeight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleMinHeight);
  }

  calcHeight() {
    const borderWidth = 2;
    const mainPadding = 32; // wea-edc-form-main的padding-top和paddint-bottom
    const { container } = this.props;
    const headerHeight = findDOMNode(this.header).offsetHeight;
    const footerHeight = findDOMNode(this.footer).offsetHeight;
    const minHeight = $(container).height() - headerHeight - mainPadding * 2 - footerHeight - borderWidth * 2;
    const MIN_HEIGHT = 640;

    this.setState({ minHeight: minHeight >= MIN_HEIGHT ? minHeight : MIN_HEIGHT });
  }

  // uuid 作为memoize的默认resolver
  onClick(uuid) {
    const { oncurrComChange } = this.store;
    const { rightMenuStore } = this.props.edcFormDesignerStore;

    const { onTabChange } = rightMenuStore;

    return () => {
      const { tabKey } = rightMenuStore;

      tabKey != PROPS && onTabChange(PROPS);

      oncurrComChange(uuid);
    }
  }

  renderFBody() {
    const { minHeight } = this.state;
    const { components } = this.store;
    const coms = toJS(components);

    return (
      <div className='wea-edc-form-body' style={{ minHeight }}>
        {coms.map(com => (
          <FieldView field={com} onClick={this.onClick(com.uuid)} />
        ))}
      </div>
    );
  }

  render() {
    const { paddingBottom } = this.state;
    const { formHeader, formFooter } = this.store;

    const { form } = this.props;

    return (
        <div style={Object.assign(form.css, form.border.css)}>
          <FBHeaderView
            data={formHeader.config}
            ref={header => this.header = header}
            onClick={this.onClick(formHeader.uuid)}
          />
          {
            form.divider.visible ?
              <div style={{borderBottom: '1px solid '+ form.divider.color}}/>
              : null
          }
          <div style={{ position: 'relative', minHeight: '100%', paddingBottom }}>
            {this.renderFBody()}
            {
              form.divider.visible ?
                <div style={{borderBottom: '1px solid '+ form.divider.color}}/>
                : null
            }
            <FBFooterView
              data={formFooter.config}
              ref={footer => this.footer = footer}
              onClick={this.onClick(formFooter.uuid)}
            />
          </div>
        </div>
    );
  }
}